<template>
  <div class="ourDynamic">
      <div class="content">
        <div class="text">
            <p><img :src="loopInfo.avatar" alt="">{{loopInfo.name}}</p>
            <p>{{loopInfo.title}}</p>
            <p>{{loopInfo.content}}</p>
        </div>
        <div class="imgList">
            <img v-for="(item, index) in loopInfo.imgList" :key="item.id" :src="item.img" alt="">
        </div>
        <div class="operation">
            <span v-if="loopInfo.createDate">{{(loopInfo.createDate).substring(0,11)}}</span>
            <span class="fr">
                <span><i></i>{{loopInfo.commentNum}}</span>
                <span><i></i>{{loopInfo.praiseNum}}</span>
                <span><i></i></span>
            </span>
        </div>
      </div>
      <div class="comment">
          <div class="like">
              <i></i>
              <img v-for="(item,index) in praiseList" :key="item.id" :src="item.avatar" alt="">
              <i></i>
          </div>
          <div class="reply">
              <i></i>
              <ul>
                  <li v-for="(item, index) in commentList" :key="item.id"><span>{{item.userNickname}}：</span>{{item.content}}</li>
              </ul>
          </div>
      </div>
      <div class="say">
          <input type="text" placeholder="说点什么吧~"><label class="fr" @click.stop="sky()"></label>
      </div>
  </div>
</template>
<script>
export default{
    data () {
        return {
            loopInfo: '', // 圈Id
            commentList: '', // 评论列表
            praiseList: '' // 点赞列表
        }
    },
    created(){
        this.type = this.$route.query.type;
        this.objectId = this.$route.query.objectId;
    },
    mounted(){
        this.getLoopInfo();
        this.getCommentList();
        this.getPraiseList();
    },
    methods:{
        // 获取圈详情
        getLoopInfo(){
            this.$ajax({
                url: `${this.baseUrl}/api/loopApiController/getLoopInfo`,
                data: {
                    loopId: this.objectId
                },
                success: res => {
                    if(res.resultCode==0){
                        this.loopInfo = res.resultData;
                    }
                }
            });
        },
        // 获取评论
        getCommentList(){
            this.$ajax({
                url: `${this.baseUrl}/api/loopApiController/getCommentList`,
                data: {
                    type:  this.type,
                    objectId: this.objectId,
                    page: 0,
                    pageSize: 2
                },
                success: res => {
                    if(res.resultCode==0){
                        this.commentList = res.resultData;
                    }
                }
            });
        },
        // 获取点赞列表
        getPraiseList(){
            this.$ajax({
                url: `${this.baseUrl}/api/loopApiController/getPraiseList`,
                data: {
                    loopId: this.objectId,
                    page: 0,
                    pageSize: 6
                },
                success: res => {
                    if(res.resultCode==0){
                        this.praiseList = res.resultData;
                    }
                }
            });
        },
        // 点击评论跳转到下载页面
        sky(){
            this.$router.push({path: "/download"});
        }
    }
}
</script>
<style lang="less" scoped>
.ourDynamic{
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    padding-bottom: 1.1rem;
    background-color: #fff;
    font-size: .28rem;
    >.content{
        padding: .28rem .2rem;
        >.text{
            >p{
                &:nth-of-type(1){
                    color: #999999;
                    >img{
                        width: .72rem;
                        height: .72rem;
                        margin-right: .2rem;
                        border-radius: 50%;
                    }
                }
                &:nth-of-type(2){
                    padding: 0 .9rem;
                    margin-bottom: .2rem;
                    font-size: .3rem;
                }
                &:nth-of-type(3){
                    padding: 0 .9rem;
                    color: #999999;
                    word-wrap: break-word;
                    // overflow:hidden;
                    // text-overflow:ellipsis;
                    // display:-webkit-box;
                    // -webkit-box-orient:vertical;
                    // -webkit-line-clamp:3;
                }
            }
        }
        >.imgList{
            padding: .4rem .9rem 0 .9rem;
            >img{
                width: 1.6rem;
                height: 1.6rem;
                margin: 0 .1rem .1rem 0;
            }
        }
        >.operation{
            padding: 0 .9rem;
            margin-top: .18rem;
            >span:nth-of-type(1){
                color: #999;
            }
            >span:nth-of-type(2){
                color: #666;
                margin-right: -1.16rem;
                >span{
                    margin-right: .3rem;
                    >i{
                        display: inline-block;
                        width: .3rem;
                        height: .28rem;
                        margin-right: .1rem;
                        background: url("../../assets/img/icon_discuss2.png") no-repeat;
                        background-size: 100%;
                        vertical-align: middle;
                    }
                    &:nth-of-type(2){
                        >i{
                            height: .3rem;
                            background: url("../../assets/img/icon_zan2.png") no-repeat;
                            background-size: 100%;
                            vertical-align: text-top;
                        }
                    }
                    &:nth-of-type(3){
                        >i{
                            width: .28rem;
                            background: url("../../assets/img/icon_share_out2.png") no-repeat;
                            background-size: 100%;
                            vertical-align: text-top;
                        }
                    }
                }
            }
        }
    }
    >.comment{
        position: relative;
        margin: 0 .2rem;
        padding: .14rem .22rem;
        background-color: #f3f4f5;
        &::after{
            content: "";
            position: absolute;
            top: -.3rem;
            left: .3rem;
            width: 0;
            height: 0;
            border-top: .16rem solid transparent;
            border-right: .16rem solid transparent;
            border-left: .16rem solid transparent;
            border-bottom: .20rem solid #eff3f5;
        }
        >.like{
            border-bottom: 1px solid #cdcdcc;
            padding-bottom: .14rem;
            i{
                display: inline-block;
                &:nth-of-type(1){
                    width: .26rem;
                    height: .26rem;
                    margin-left: .1rem;
                    background: url("../../assets/img/growth_icon_zan.png") no-repeat;
                    background-size: 100%;
                }
                &:nth-last-of-type(1){
                    float: right;
                    width: .3rem;
                    height: .08rem;
                    margin-left: .1rem;
                    margin-top: .3rem;
                    background: url("../../assets/img/growth_icon_slh.png") no-repeat;
                    background-size: 100%;
                }
            }
            >img{
                width: .62rem;
                height: .62rem;
                margin-left: .12rem;
                border-radius: 50%;
            }
        }
        >.reply{
            position: relative;
            padding-top: .2rem;
            >i{
                position: absolute;
                top: .3rem;
                left: 0.1rem;
                width: .3rem;
                height: .28rem;
                background: url("../../assets/img/growth_icon_comment1.png") no-repeat;
                background-size: 100%;
            }
            >ul{
                margin-left: .6rem;
                li{
                    color: #666;
                }
                span{
                    color: #509eff;
                }
            }
        }
    }
    >.say{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: .94rem;
        padding: .2rem;
        background-color: #fff;
        >input{
            width: 6.24rem;
            height: .64rem;
            padding-left: .32rem;
            background-color: #f3f4f5;
            border-radius: .44rem;
        }
        >label{
            display: inline-block;
            width: .62rem;
            height: .62rem;
            background: url("../../assets/img/icon_ok.png") no-repeat;
            background-size: 100%;
            border-radius: 50%;
        }
    }
}
</style>
